<template>
  <Collapse simple>
    <Panel name="BS.BSName" v-for="BS in BSList" :key="BS.BSIndex">
      {{ BS.BSName }}
      <NetBook slot="content" :BookSource="BS" />
    </Panel>
  </Collapse>
</template>

<script>
import { getBSList, searchBook } from '../api/netBook'
import NetBook from './NetBook'

export default {
  name: 'NetBooks',

  components: {
    NetBook
  },

  data () {
    return {
      BSList: [],
      BSSearchOptions: {},
      books: {},
      netBooks: [
        {
          title: 'Name',
          key: 'bname',
          width: 'auto'
        },
        {
          title: 'Author',
          key: 'author',
          width: 200
        },
        {
          title: 'Action',
          key: 'action',
          slot: 'action',
          width: 240
        }
      ],
      loading: false
    }
  },

  watch: {
    BSList () {
      this.BSList.forEach(bs => {
        this.BSSearchOptions[bs.BSName] = {}
        this.books[bs.BSName] = []
      })
    }
  },

  mounted () {
    this.fetchBSList()
  },

  methods: {
    async fetchBSList () {
      const res = await getBSList()
      this.BSList = res.data
    },
    async handleSearch (BSIndex, BSName) {
      const searchOptions = {
        BSIndex,
        BSName,
        ...this.BSSearchOptions[BSName]
      }
      const res = await searchBook(searchOptions)
      this.books[BSName] = []
      res.data.forEach(book => {
        this.books[BSName].push(book)
      })
    },
    async handleSave (row, BSName, BSIndex) {
      console.log(row)
      console.log(BSName)
      console.log(BSIndex)
    }
  }
}
</script>

<style scoped>
</style>
